<template>
  <v-scale-screen width="1920" height="1080" :fullScreen="false">
    <div class="screen_container">
      <div class="screen_header">
        <div class="screen_header_text">元智训数字化学习平台</div>
      </div>
      <div class="screen_connect">
        <div class="screen_connect_left">
          <div class="real_data">
            <img class="left_title" src="./images/service_overview.png" alt="">
            <div class="real_data_mid">
              <div class="real_data_mid_text">
                <span>当前在线人数</span>
                <countTo class="count_to" :startVal='0' :endVal='onlineNum' :autoplay="true" :duration='1500'/>
              </div>
              <div class="real_data_mid_text">
                <span>今日登录人数</span>
                <countTo class="count_to" :startVal='0' :endVal='todayNum' :autoplay="true" :duration='1500'/>
              </div>
            </div>
            <div class="progress_list">
              <div class="progress_item_all">
                <div class="progress_item">
                  <div class="progress_item_in">
                    <el-progress :format="formatProgress" :width='82' type="circle" :percentage="50" :stroke-width="5" color="#0edbd5"
                                 text-color="#fcfcfc" define-back-color="#393d3e"></el-progress>
                    <div class="absolute">
                      <div class="absolute_text light_green">
                        CPU
                      </div>
                      <div class="absolute_progress light_green">
                        50%
                      </div>
                    </div>
                  </div>
                </div>
                <span class="light_green">本日CDN流量</span>
              </div>
              <div class="progress_item_all">
                <div class="progress_item border_orange">
                  <div class="progress_item_in border_orange">
                    <el-progress :format="formatProgress" :width='82' type="circle" :percentage="25" :stroke-width="5" color="#fea637"
                                 text-color="#fcfcfc" define-back-color="#393d3e"></el-progress>
                    <div class="absolute">
                      <div class="absolute_text light_orange">
                        内存
                      </div>
                      <div class="absolute_progress light_orange">
                        25%
                      </div>
                    </div>
                  </div>
                </div>
                <span class="light_orange">100GB</span>
              </div>
              <div class="progress_item_all">
                <div class="progress_item border_blue">
                  <div class="progress_item_in border_blue">
                    <el-progress :format="formatProgress" :width='82' type="circle" :percentage="80" :stroke-width="5" color="#30aafe"
                                 text-color="#fcfcfc" define-back-color="#393d3e"></el-progress>
                    <div class="absolute">
                      <div class="absolute_text light_blue">
                        ESC硬盘
                      </div>
                      <div class="absolute_progress light_blue">
                        80%
                      </div>
                    </div>
                  </div>
                </div>
                <span class="light_blue">实时带宽</span>
              </div>
              <div class="progress_item_all">
                <div class="progress_item border_aqua">
                  <div class="progress_item_in border_aqua">
                    <el-progress :format="formatProgress" :width='82' type="circle" :percentage="60" :stroke-width="5" color="#50d57d"
                                 text-color="#fcfcfc" define-back-color="#393d3e"></el-progress>
                    <div class="absolute">
                      <div class="absolute_text light_aqua">
                        OSS存储
                      </div>
                      <div class="absolute_progress light_aqua">
                        60%
                      </div>
                    </div>
                  </div>
                </div>
                <span class="light_aqua">30Kbps</span>
              </div>
            </div>
          </div>

          <div class="charts_all">
            <img class="left_title" src="./images/resource_usage.png" alt="">
            <div class="charts_all_item">
              <div class="charts_all_item_title light_baby_aqua">每日CDN使用量</div>
              <div ref="cdnRef" class="used_cdn"></div>
            </div>
            <div class="charts_all_item">
              <div class="charts_all_item_title light_baby_blue">磁盘使用情况</div>
              <div ref="diskRef" class="used_cdn"></div>
            </div>
          </div>
        </div>
        <div class="screen_connect_mid">
          <div class="screen_connect_mid_up">
            <img class="mid_title" src="./images/school_info.png" alt="">
            <div class="map_box">
              <div class="map_btns">
                <div :class="{'checked':showType==1}" @click="showType=1" class="btn_text">列表</div>
                <div :class="{'checked':showType==2}" @click="showType=2" class="btn_text">分布</div>
              </div>
              <div v-show="showType==2&&showProvince" class="baidumap cursor_pointer">
                <div @click="changeProvince(false)" style="flex: 1"></div>
                <img class="province_zj" src="./images/zhejiang.png" alt="">
                <div @click="changeProvince(false)" style="flex: 1"></div>
              </div>
              <div v-show="showType==2&&!showProvince" class="baidumap">
                <img class="china_map cursor_pointer" src="./images/china_map.png" alt="">
                <div v-show="showDialog" class="school_dialog">
                  <div class="school_dialog_title">XXX第一技师学院</div>
                  <div class="school_dialog_text mt_10">课程数量：40</div>
                  <div class="school_dialog_text">教师数量：40</div>
                  <div class="school_dialog_text">学生数量：40</div>
                  <div class="school_dialog_mid mt_15">OSS存储量：40</div>
                  <div class="school_dialog_mid">累计CDN存储量：40</div>
                  <div class="school_dialog_bottom mt_15">今日CDN用量：40</div>
                  <div class="school_dialog_bottom">今日登录人次：40</div>
                  <div class="school_dialog_bottom">当前在线人数：40</div>
                  <div class="school_dialog_btn">
                    <div class="more_btn">更多详情</div>
                  </div>
                </div>
                <img @click.stop="showDialog=false" v-show="showDialog" class="not_select" src="./images/select.png" alt="">
                <img @click.stop="showDialog=true" v-show="!showDialog" class="not_select" src="./images/not_select.png" alt="">
                <div @click="changeProvince(true)" class="address_map light_green">浙江</div>
              </div>
              <div v-show="showType==1" class="baidumap">
                <div class="lists_group">
                  <div class="lists_header">
                    <div class="lists_header_item w_90">
                      学校名称
                    </div>
                    <div class="lists_header_item w_30">
                      级别
                    </div>
                    <div class="lists_header_item w_60">
                      在线人数
                    </div>
                    <div class="lists_header_item w_60">
                      今日登录
                    </div>
                    <div class="lists_header_item w_60">
                      OSS累计
                    </div>
                    <div class="lists_header_item w_60">
                      CDN累计
                    </div>
                    <div class="lists_header_item w_60">
                      今日CDN
                    </div>
                    <div class="lists_header_item w_60">
                      学生数
                    </div>
                    <div class="lists_header_item w_60">
                      教师数
                    </div>
                    <div class="lists_header_item w_60">
                      详情
                    </div>
                  </div>
                  <div id="review_box" ref="review" class="schoolList">
                    <div ref="elList" id="elList">
                      <div v-for="(item,index) in 30" :key="index" class="lists_body">
                        <div class="lists_body_item">
                          <el-tooltip class="item w_90" effect="dark" content="学校名称学校名称学校名称学校名称" placement="top">
                            <div class="school_name">学校名称_{{ index }}</div>
                          </el-tooltip>
                        </div>
                        <div class="lists_body_item w_30">
                          <div class="hierarchy">
                            <div class="hierarchy_text">1</div>
                          </div>
                        </div>
                        <div class="lists_body_item w_60">
                          在线人数
                        </div>
                        <div class="lists_body_item w_60">
                          今日登录
                        </div>
                        <div class="lists_body_item w_60">
                          OSS累计
                        </div>
                        <div class="lists_body_item w_60">
                          CDN累计
                        </div>
                        <div class="lists_body_item w_60">
                          今日CDN
                        </div>
                        <div class="lists_body_item w_60">
                          学生数
                        </div>
                        <div class="lists_body_item w_60">
                          教师数
                        </div>
                        <div class="lists_body_item w_60 color_blue">
                          查看
                        </div>
                      </div>
                    </div>
                    <div ref="elList_copy"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="screen_connect_mid_down">
            <img class="mid_title" src="./images/statistical_overview.png" alt="">
            <div class="collect_overview">
              <div class="collect_overview_item">
                <img class="statistics_bg" src="./images/statistics_bg.png" alt="">
                <div class="collect_overview_item_text">学校数量</div>
                <div class="collect_overview_item_value">
                  <countTo class="collect_count_to" separator='' :startVal='0' :endVal='schoolNum' :autoplay="true" :duration='1200'/>
                  <div class="up_down">
                    <i v-if="false" class="el-icon-caret-bottom"></i>
                    <i class="el-icon-caret-top"></i>
                    <div class="up_down_value">2</div>
                  </div>
                </div>
              </div>
              <div class="collect_overview_item">
                <img class="statistics_bg" src="./images/statistics_bg.png" alt="">
                <div class="collect_overview_item_text">分院数量</div>
                <div class="collect_overview_item_value">
                  <countTo class="collect_count_to" separator='' :startVal='0' :endVal='schoolNum' :autoplay="true" :duration='1200'/>
                  <div class="up_down">
                    <i v-if="false" class="el-icon-caret-bottom"></i>
                    <i class="el-icon-caret-top"></i>
                    <div class="up_down_value">2</div>
                  </div>
                </div>
              </div>
              <div class="collect_overview_item">
                <img class="statistics_bg" src="./images/statistics_bg.png" alt="">
                <div class="collect_overview_item_text">工作站数量</div>
                <div class="collect_overview_item_value">
                  <countTo class="collect_count_to" separator='' :startVal='0' :endVal='schoolNum' :autoplay="true" :duration='1200'/>
                  <div class="up_down">
                    <i v-if="false" class="el-icon-caret-bottom"></i>
                    <i class="el-icon-caret-top"></i>
                    <div class="up_down_value">2</div>
                  </div>
                </div>
              </div>
              <div class="collect_overview_item">
                <img class="statistics_bg" src="./images/statistics_bg.png" alt="">
                <div class="collect_overview_item_text">课程数量</div>
                <div class="collect_overview_item_value">
                  <countTo class="collect_count_to" separator='' :startVal='0' :endVal='schoolNum' :autoplay="true" :duration='1200'/>
                  <div class="up_down">
                    <i v-if="false" class="el-icon-caret-bottom"></i>
                    <i class="el-icon-caret-top"></i>
                    <div class="up_down_value">2</div>
                  </div>
                </div>
              </div>
              <div class="collect_overview_item">
                <img class="statistics_bg" src="./images/statistics_bg.png" alt="">
                <div class="collect_overview_item_text">专业数量</div>
                <div class="collect_overview_item_value">
                  <countTo class="collect_count_to" separator='' :startVal='0' :endVal='schoolNum' :autoplay="true" :duration='1200'/>
                  <div class="up_down">
                    <i v-if="false" class="el-icon-caret-bottom"></i>
                    <i class="el-icon-caret-top"></i>
                    <div class="up_down_value">2</div>
                  </div>
                </div>
              </div>
              <div class="collect_overview_item">
                <img class="statistics_bg" src="./images/statistics_bg.png" alt="">
                <div class="collect_overview_item_text">班级数量</div>
                <div class="collect_overview_item_value">
                  <countTo class="collect_count_to" separator='' :startVal='0' :endVal='schoolNum' :autoplay="true" :duration='1200'/>
                  <div class="up_down">
                    <i v-if="false" class="el-icon-caret-bottom"></i>
                    <i class="el-icon-caret-top"></i>
                    <div class="up_down_value">2</div>
                  </div>
                </div>
              </div>
              <div class="collect_overview_item">
                <img class="statistics_bg" src="./images/statistics_bg.png" alt="">
                <div class="collect_overview_item_text">教师数量</div>
                <div class="collect_overview_item_value">
                  <countTo class="collect_count_to" separator='' :startVal='0' :endVal='schoolNum' :autoplay="true" :duration='1200'/>
                  <div class="up_down">
                    <i v-if="false" class="el-icon-caret-bottom"></i>
                    <i class="el-icon-caret-top"></i>
                    <div class="up_down_value">2</div>
                  </div>
                </div>
              </div>
              <div class="collect_overview_item">
                <img class="statistics_bg" src="./images/statistics_bg.png" alt="">
                <div class="collect_overview_item_text">学生数量</div>
                <div class="collect_overview_item_value">
                  <countTo class="collect_count_to" separator='' :startVal='0' :endVal='schoolNum' :autoplay="true" :duration='1200'/>
                  <div class="up_down">
                    <i v-if="false" class="el-icon-caret-bottom"></i>
                    <i class="el-icon-caret-top"></i>
                    <div class="up_down_value">2</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="screen_connect_right">
          <div class="screen_connect_right_charts">
            <img class="left_title" src="./images/login_info.png" alt="">
            <div class="chart_item">
              <div class="chart_item_title light_baby_aqua">学生登录情况</div>
              <div class="stu_login" ref="stuLoginRef"></div>
            </div>
            <div class="chart_item">
              <div class="chart_item_title light_baby_aqua">教师登录情况</div>
              <div class="stu_login" ref="teaLoginRef"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </v-scale-screen>
</template>

<script>
import scaleBox from "./components/scaleBox";
import * as echarts from 'echarts';
// import 'echarts/map/js/china'
import anime from 'animejs/lib/anime.js';
import countTo from 'vue-count-to'
export default {
  name: "generalizationData",
  components:{
    countTo,scaleBox
  },
  data(){
    return{
      showDialog:false,
      showProvince:false,
      showType:'2',
      onlineNum:35000,
      todayNum:45000,
      schoolNum:4500,
      week: ['2.24', '2.25', '2.26', '2.27', '2.28', '2.29','3.01'],
      elevatorNum: ['8', '12', '11', '13', '15', '7', '12'],
      position_center:{
        bdLNG:'114.108551',
        bdLAT:'32.567181',
      },
      allProvinceList:[
        {
          bdLNG:'116.404',
          bdLAT:'39.915',
          name:'',
          num:'120',
        },
      ],
      allCityList:[
        {
          bdLNG:'120.216085',
          bdLAT:'30.254829',
          name:'杭州市',
          num:'120',
        },
        {
          bdLNG:'121.613597',
          bdLAT:'29.87584',
          name:'宁波市',
          num:'20',
        }
      ],
      timer:null,
    }
  },
  watch:{
    showType: {
      immediate: true,
      handler(val) {
        if (val==1){
          this.roll(50,'elList','elList_copy','review','timer')
        }else if (val==2){
          clearInterval(this.timer);
        }
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  mounted() {
    this.setOptionCdn()
    this.setOptionDisk()
    this.setStuLoginRef()
    this.setTeaLoginRef()
  },
  methods:{
    changeProvince(Boolean){
      anime({
        targets: '.province_zj',
        scale: [
          {value: .1, easing: 'easeOutSine', duration: 200},
          {value: 1, easing: 'easeInOutQuad', duration: 300}
        ],
        delay: anime.stagger(0, {grid: [14, 5], from: 'center'})
      });
      this.showProvince=Boolean
    },
    formatProgress(){
      return ''
    },
    //地图上添加省级坐标点
    addAllProvinceList(map) {
      map.clearOverlays()
      this.allProvinceList.forEach((value) => {
        let pt = new BMap.Point(value.bdLNG, value.bdLAT);
        console.log(value.name)
        //自定义label样式
        let tpl = `<div class="bubble">${value.name}</div>`;
        let myLabel = new BMap.Label(tpl, {
          position: pt, //label 在此处添加点位位置信息
          offset: new BMap.Size(-46, -46)
        });
        myLabel.setStyle({
          width: "92px", //宽
          height: "92px", //高度
          border: "0", //边
          background: "transparent", //背景颜色
          borderRadius: "50%",
          cursor: "pointer"
        });
        map.addOverlay(myLabel); //添加点位

        myLabel.addEventListener('click', () => {
          //value.id
          // this.getStreetCoordinate(value.id,map)
          map.centerAndZoom(new BMap.Point(value.bdLNG, value.bdLAT), 7);
        })

      })
    },
    //地图上添加市级坐标点
    addAllCityList(map) {
      map.clearOverlays()
      this.allCityList.forEach((value) => {
        let pt = new BMap.Point(value.bdLNG, value.bdLAT);
        console.log(value.name)
        //自定义label样式
        let tpl = `<div class="bubble">${value.name}</div>`;
        let myLabel = new BMap.Label(tpl, {
          position: pt, //label 在此处添加点位位置信息
          offset: new BMap.Size(-46, -46)
        });
        myLabel.setStyle({
          width: "92px", //宽
          height: "92px", //高度
          border: "0", //边
          background: "transparent", //背景颜色
          borderRadius: "50%",
          cursor: "pointer"
        });
        map.addOverlay(myLabel); //添加点位

        myLabel.addEventListener('click', () => {
          //value.id
          // this.getStreetCoordinate(value.id,map)
          map.centerAndZoom(new BMap.Point(value.bdLNG, value.bdLAT), 7);
        })

      })
    },
    //列表滚动
    roll(t,elList,elList_copy,review,timer) {
      var ul1 = this.$refs[elList]
      var ul2 = this.$refs[elList_copy]
      var ulbox = this.$refs[review]
      ul2.innerHTML = ul1.innerHTML;
      ulbox.scrollTop = 0; // 开始无滚动时设为0
      // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
      this[timer] = setInterval(()=>{
        this.rollStart(elList,review)
      }, t);
      // 鼠标移入div时暂停滚动
      ulbox.onmouseover = () => {
        clearInterval(this[timer]);
      }
      // 鼠标移出div后继续滚动
      ulbox.onmouseout = () => {
        this[timer] = setInterval(()=>{
          this.rollStart(elList,review)
        }, t);
      }
    },
    // 开始滚动函数
    rollStart(elList,review) {
      // 上面声明的DOM对象为局部对象需要再次声明
      var ul1 = this.$refs[elList]
      var ulbox = this.$refs[review]
      let heightCss = window.getComputedStyle(ulbox).height.replace('px', '') - 0;
      // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
      if (ulbox.scrollTop + heightCss >= ul1.scrollHeight) {
        ulbox.scrollTop = 0;
      } else {
        ulbox.scrollTop++;
      }
    },

    setOptionCdn() {
      let myChart = echarts.init(this.$refs.cdnRef);
      let option;
      option = {
        color: '#32c268',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color:'#32c268',
              backgroundColor: '#052a53',
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.week,
            boundaryGap: false, // 不留白，从原点开始
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#445d68', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#e3e7eb', //坐标值得具体的颜色

              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#9a9fa7', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },
            axisLabel: {
              formatter: '{value}GB', //显示数据带上GB
              textStyle: {
                color: '#e3e7eb', //坐标值得具体的颜色
              }
            },
            splitLine: {
              show: true, lineStyle: {
                color: ['#5c6381'],
                width: 1,
                type: 'solid'
              }
            }, //去除网格线
          }
        ],
        series: [
          {
            name: '使用量',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 2
            },
            areaStyle: {
              opacity: 0.3,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#31c068'
                },
                {
                  offset: 0.5,
                  color: '#5cc48a'
                },
                {
                  offset: 0.7,
                  color: '#0a3f5a'
                },
                {
                  offset: 1,
                  color: '#052f51'
                }
              ])
            },
            itemStyle:{
              normal:{
                label : {
                  show: true,
                  position: 'top',
                  textStyle:{
                    color:'#32c268',
                    fontsize:'16'
                  },
                  formatter: '{c}GB', //显示数据带上GB
                },
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: this.elevatorNum
          }
        ]
      };
      option && myChart.setOption(option);
    },
    setOptionDisk() {
      let myChart = echarts.init(this.$refs.diskRef);
      let option;
      option = {
        color: '#19d4fd',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color:'#19d4fd',
              backgroundColor: '#052a53',
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.week,
            boundaryGap: false, // 不留白，从原点开始
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#445d68', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#e3e7eb', //坐标值得具体的颜色

              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#9a9fa7', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },
            axisLabel: {
              formatter: '{value}GB', //显示数据带上GB
              textStyle: {
                color: '#e3e7eb', //坐标值得具体的颜色
              }
            },
            splitLine: {
              show: true, lineStyle: {
                color: ['#5c6381'],
                width: 1,
                type: 'solid'
              }
            }, //去除网格线
          }
        ],
        series: [
          {
            name: '使用量',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 2
            },
            areaStyle: {
              opacity: 0.3,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#19d5fe'
                },
                {
                  offset: 0.5,
                  color: '#3ac5e2'
                },
                {
                  offset: 0.7,
                  color: '#0d4b7b'
                },
                {
                  offset: 1,
                  color: '#052c54'
                }
              ])
            },
            itemStyle:{
              normal:{
                label : {
                  show: true,
                  position: 'top',
                  textStyle:{
                    color:'#19d4fd',
                    fontsize:'16'
                  },
                  formatter: '{c}GB', //显示数据带上GB
                },
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: this.elevatorNum
          }
        ]
      };
      option && myChart.setOption(option);
    },
    setStuLoginRef() {
      let data=[20,18,30,35,25,35,19,35,40,38]
      let xAxisData=['2.24','2.25','2.26','2.27','2.28','2.29','3.01','3.02','3.03','3.04']

      var myChart = echarts.init(this.$refs.stuLoginRef);
      var colorArr = ["#29a5f9", "#46bfe6", "#13afba"];
      //3d柱状图本身颜色配置
      var color = {
        type: "linear",
        colorStops: [
          {
            offset: 0,
            color: colorArr[0],
          },
          {
            offset: 0.5,
            color: colorArr[0],
          },
          {
            offset: 0.5,
            color: colorArr[1],
          },
          {
            offset: 1,
            color: colorArr[1],
          },
        ],
      };
      var barWidth = 20;
      var constData = [];
      var showData = [];
      data.filter(function (item) {
        if (item) {
          constData.push(1);
          showData.push(item);
        } else {
          constData.push(0);
          showData.push(
            {
              value: 1,
              itemStyle: {
                normal: {
                  borderColor: "rgba(0,0,0,0)",
                  borderWidth: 2,
                  color: "rgba(0,0,0,0)",
                },
              },
            }
          );
        }
      });
      let option={
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var str = params[0].axisValue;
            params.filter(function (item) {
              if (item.componentSubType == "bar") {
                str=`${str}<br/>` +
                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1daad6;"></span>` +
                `登录数：${item.value}`
              }
            });
            return str;
          },
          axisPointer: {
            type: 'none'

          }
        },
        grid: {
          containLabel: true,
        },
        xAxis: {
          data: xAxisData,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            symbol: ['none'],
            symbolSize: [10, 17],
            lineStyle: {
              color: '#FFF',
              width: 0 //  改变坐标线的颜色
            },
          },
          offset: 8,
          axisLabel: {
            //调整x轴的lable
            textStyle: {
              fontSize: 12,// 让字体变大
              fontFamily: 'MicrosoftYaHei-Bold, MicrosoftYaHei',
              fontWeight: '500',
              color: '#f0f1f2'
            },

          }
        },
        yAxis: {
          splitLine: {    //刻度线
            show: true,
            lineStyle:{
              color:'#0f4685',
              type:'dotted'
            }
          },
          splitArea: {     //柱状图后面的背景色
            show: false,
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            //调整y轴的lable
            textStyle: {
              color:'#f0f1f2',
              fontSize: 12 // 让字体变大
            },
            show: true
          },
          axisLine: {
            symbol: ['none'],
            symbolSize: [15, 17],
            lineStyle: {
              color: 'rgba(0 0 0 0)',
              width: 0 //  改变坐标线的颜色
            }
          }
        },
        series: [
          {
            z: 1,
            type: "bar",
            barWidth: barWidth,
            barGap: "0%",
            data: data,
            itemStyle: {
              normal: {
                color: color,
                label: {
                  show: true,  //开启显示
                  position: 'top',  //在上方显示
                  textStyle: {  //数值样式
                    color: '#f0f1f2',
                    fontSize: 12
                  }
                }
              },
            },
          },
          {
            z: 2,
            type: "pictorialBar",
            data: constData,
            symbol: "diamond",
            symbolOffset: ["0%", "50%"],
            symbolSize: [barWidth, 10],
            itemStyle: {
              normal: {
                color: color,
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 3,
            type: "pictorialBar",
            symbolPosition: "end",
            data: showData,
            symbol: "diamond",
            symbolOffset: ["0%", "-50%"],
            symbolSize: [barWidth-2, (10 * (barWidth - 2)) / barWidth],
            itemStyle: {
              normal: {
                borderColor: colorArr[2],
                borderWidth: 2,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: colorArr[0]
                  },
                  {
                    offset: 1,
                    color: colorArr[2]
                  }
                ]),
              },
            },
            tooltip: {
              show: false,
            },
          },
        ],
      }
      myChart.setOption(option)
    },
    setTeaLoginRef() {
      let data=[20,18,30,35,25,35,19,35,40,38]
      let xAxisData=['2.24','2.25','2.26','2.27','2.28','2.29','3.01','3.02','3.03','3.04']

      var myChart = echarts.init(this.$refs.teaLoginRef);
      var colorArr = ["#00939b", "#01e4f2", "#22e0e6"];
      //3d柱状图本身颜色配置
      var color = {
        type: "linear",
        colorStops: [
          {
            offset: 0,
            color: colorArr[0],
          },
          {
            offset: 0.5,
            color: colorArr[0],
          },
          {
            offset: 0.5,
            color: colorArr[1],
          },
          {
            offset: 1,
            color: colorArr[1],
          },
        ],
      };
      var barWidth = 20;
      var constData = [];
      var showData = [];
      data.filter(function (item) {
        if (item) {
          constData.push(1);
          showData.push(item);
        } else {
          constData.push(0);
          showData.push(
            {
              value: 1,
              itemStyle: {
                normal: {
                  borderColor: "rgba(0,0,0,0)",
                  borderWidth: 2,
                  color: "rgba(0,0,0,0)",
                },
              },
            }
          );
        }
      });
      let option={
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var str = params[0].axisValue;
            params.filter(function (item) {
              if (item.componentSubType == "bar") {
                str=`${str}<br/>` +
                  `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00939b;"></span>` +
                  `登录数：${item.value}`
              }
            });
            return str;
          },
          axisPointer: {
            type: 'none'

          }
        },
        grid: {
          containLabel: true,
        },
        xAxis: {
          data: xAxisData,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            symbol: ['none'],
            symbolSize: [10, 17],
            lineStyle: {
              color: '#FFF',
              width: 0 //  改变坐标线的颜色
            },
          },
          offset: 8,
          axisLabel: {
            //调整x轴的lable
            textStyle: {
              fontSize: 12,// 让字体变大
              fontFamily: 'MicrosoftYaHei-Bold, MicrosoftYaHei',
              fontWeight: '500',
              color: '#f0f1f2'
            },

          }
        },
        yAxis: {
          splitLine: {    //刻度线
            show: true,
            lineStyle:{
              color:'#0f4685',
              type:'dotted'
            }
          },
          splitArea: {     //柱状图后面的背景色
            show: false,
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            //调整y轴的lable
            textStyle: {
              color:'#f0f1f2',
              fontSize: 12 // 让字体变大
            },
            show: true
          },
          axisLine: {
            symbol: ['none'],
            symbolSize: [15, 17],
            lineStyle: {
              color: 'rgba(0 0 0 0)',
              width: 0 //  改变坐标线的颜色
            }
          }
        },
        series: [
          {
            z: 1,
            type: "bar",
            barWidth: barWidth,
            barGap: "0%",
            data: data,
            itemStyle: {
              normal: {
                color: color,
                label: {
                  show: true,  //开启显示
                  position: 'top',  //在上方显示
                  textStyle: {  //数值样式
                    color: '#f0f1f2',
                    fontSize: 12
                  }
                }
              },
            },
          },
          {
            z: 2,
            type: "pictorialBar",
            data: constData,
            symbol: "diamond",
            symbolOffset: ["0%", "50%"],
            symbolSize: [barWidth, 10],
            itemStyle: {
              normal: {
                color: color,
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 3,
            type: "pictorialBar",
            symbolPosition: "end",
            data: showData,
            symbol: "diamond",
            symbolOffset: ["0%", "-50%"],
            symbolSize: [barWidth-2, (10 * (barWidth - 2)) / barWidth],
            itemStyle: {
              normal: {
                borderColor: colorArr[2],
                borderWidth: 2,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: colorArr[0]
                  },
                  {
                    offset: 1,
                    color: colorArr[2]
                  }
                ]),
              },
            },
            tooltip: {
              show: false,
            },
          },
        ],
      }
      myChart.setOption(option)
    },
  }
}
</script>
<style scoped lang="scss">
@mixin all_flex_center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.screen_container{
  width: 1920px;
  height: 1080px;
  background-image: url("./images/bg_img.png");
  background-size: cover;
}
.screen_header{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  background-image: url("./images/screen_header.png");
  background-size: cover;
  &_text{
    font-size: 48px;
    font-weight: 400;
    background-image:-webkit-linear-gradient(top,#fdfeff,#add6e6);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    font-family: YouSheBiaoTiHei;
  }
}
.screen_connect{
  width: 100%;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  &_left{
    width: 494px;
    margin: 0 37px 0 43px;
    .real_data{
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0,86,150,0.15);
      &_mid{
        width: 100%;
        padding: 20px 84px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &_text{
          display: flex;
          flex-direction: column;
          align-items: center;
          span{
            font-size: 16px;
            font-weight: normal;
            color: #FFFFFF;
          }
          .count_to{
            font-size: 30px;
            font-weight: 500;
            color: #21FFFC;
            margin-top: 12px;
          }
        }
      }
      .progress_list{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px 25px;
        box-sizing: border-box;
        .progress_item_all{
          display: flex;
          flex-direction: column;
          align-items: center;
          .progress_item{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid #144258;
            @include all_flex_center;
            &_in{
              width: 94px;
              height: 94px;
              border-radius: 50%;
              border: 4px solid #097f90;
              @include all_flex_center;
            }
          }
          span{
            margin-top: 6px;
            font-size: 14px;
            color: white;
          }
        }

      }
    }
    .charts_all{
      width: 100%;
      height: 620px;
      background: rgba(0,86,150,0.15);
      &_item{
        width: 100%;
        &_title{
          width: 100%;
          font-size: 16px;
          text-align: center;
          color: white;
          font-family: YouSheBiaoTiHei;
        }
        .used_cdn{
          width: 100%;
          height: 280px;
          padding: 0 28px;
          box-sizing: border-box;
        }
      }
    }
  }
  &_mid{
    width: 760px;
    &_up{
      background: rgba(0,86,150,0.15);
    }
    &_down{
      margin-top: 16px;
      background: rgba(0,86,150,0.15);
      .collect_overview{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 31px 58px;
        box-sizing: border-box;
        &_item{
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          width: 151px;
          margin-top: 10px;
          .statistics_bg{
            width: 100%;
            height: 106px;
          }
          &_text{
            font-size: 16px;
            font-weight: normal;
            color: #FFFFFF;
            margin-top: 2px;
          }
          &_value{
            display: flex;
            position: absolute;
            top: 20px;
            margin-left: 6px;
            .collect_count_to{
              font-size: 30px;
              font-family: YouSheBiaoTiHei;
              font-weight: bold;
              color: #FFFFFF;
              background: linear-gradient(0deg, #6BD3FF 0%, #FFFFFF 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
            .up_down{
              display: flex;
              align-items: center;
              margin: 10px 0 0 0;
              .el-icon-caret-bottom{
                font-size: 8px;
                color: #fe2222;
              }
              .el-icon-caret-top{
                font-size: 8px;
                color: #00f00d;
              }
              .up_down_value{
                font-size: 12px;
                font-weight: 500;
                color: #FFFFFF;
                margin-left: 2px;
              }
            }
          }
        }
      }
    }
  }
  &_right{
    width: 494px;
    margin-left: 33px;
    &_charts{
      width: 100%;
      background: rgba(0,86,150,0.15);
      .chart_item{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        &_title{
          font-size: 20px;
          font-family: YouSheBiaoTiHei;
          font-weight: 400;
          color: #FFFFFF;
        }
        .stu_login{
          width: 100%;
          height: 422px;
        }
      }
    }
  }
}
.map_box{
  padding: 15px 10px;
  box-sizing: border-box;
  background-image: url("./images/bg_map.png");
  background-size: 100% 100%;
  .map_btns{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: white;
    padding: 0 0 10px;
    box-sizing: border-box;
    .btn_text{
      user-select: none;
      cursor: pointer;
      width: 80px;
      height: 30px;
      background: rgba(255,255,255,0.1);
      text-align: center;
      line-height: 30px;
      border: 1px solid rgba(255,255,255,0.1);
    }
  }
}
.checked{
  background:rgba(255,255,255,0.1)!important;
  border: 1px solid #7afffd!important;
  color: #7afffd;
}
.baidumap {
  width: 100%;
  height: 427px;
  display: flex;
  justify-content: center;
  position: relative;
  .school_dialog{
    position: absolute;
    top: -20px;
    left: 0;
    width: 180px;
    height: 280px;
    background: rgba(5,51,99,0.7);
    border: 2px solid #4ED3FF;
    &_title{
      font-size: 16px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #FFFFFF;
      width: 100%;
      height: 38px;
      background: rgba(9,156,232,0.4);
      border-bottom: 2px solid #4ED3FF;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &_text{
      font-size: 14px;
      font-weight: normal;
      color: #E7FDFF;
      margin:0 0 0 12px;
    }
    &_mid{
      font-size: 14px;
      font-weight: normal;
      color: #E7FDFF;
      margin:0 0 0 12px;
    }
    &_bottom{
      font-size: 14px;
      font-weight: normal;
      color: #35E3EF;
      margin:0 0 0 12px;
    }
    &_btn{
      margin-top: 10px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .more_btn {
        width: 70px;
        height: 30px;
        background: rgba(7,76,146,0.89);
        border: 1px solid #4ED3FF;
        border-radius: 4px;
        font-size: 14px;
        font-weight: normal;
        color: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        user-select: none;
      }
    }
  }
  .not_select{
    width: 47px;
    height: 47px;
    object-fit: cover;
    position: absolute;
    top: 235px;
    left: 514px;
    cursor: pointer;
  }
}
.address_map{
  position: absolute;
  top: 265px;
  right: 192px;
  color: #caefff;
  font-size: 12px;
  font-weight: 500;
  user-select: none;
  cursor: pointer;
}
.cursor_pointer{
  cursor: pointer;
}
.lists_group{
  width: 100%;
  background: rgba(0,86,150,0.4);
  border: 2px solid #099CE8;
  padding: 20px 8px;
  box-sizing: border-box;
  .lists_header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    &_item{
      text-align: center;
      font-size: 14px;
      font-weight: normal;
      color: #FFFFFF;
    }
  }
  .lists_body{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    margin-top: 10px;
    &_item{
      text-align: center;
      font-size: 14px;
      font-weight: normal;
      color: #FFFFFF;
    }
  }
  .lists_body:nth-child(1){
    margin-top: 0;
  }
}
::v-deep .bubble{
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999999;
  font-size: 14px;
  font-weight: bold;
}
.w_90{
  width: 90px;
}
.w_60{
  width: 60px;
}
.w_30{
  width: 30px;
}
.color_blue{
  color: #15c3d7!important;
  cursor: pointer;
  user-select: none;
}
.school_name{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.schoolList{
  margin-top: 10px;
  width: 100%;
  height: 360px;
  overflow: hidden;
}
.absolute{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  &_text{
    font-size: 12px;
    color: white;
  }
  &_progress{
    font-size: 18px;
    color: white;
  }
}
.left_title{
  width: 100%;
  height: 43px;
}
.mid_title{
  width: 100%;
  height: 43px;
}
.light_green{
  text-shadow: 0 0 1px white,0 0 2px #0edbd5,0 0 3px #3ea8b2,0 0 4px white;
}
.light_orange{
  text-shadow: 0 0 1px white,0 0 2px #f29b34,0 0 3px #a56f63,0 0 4px white;
}
.light_blue{
  text-shadow: 0 0 1px white,0 0 2px #3a80fc,0 0 3px #2c6db9,0 0 4px white;
}
.light_aqua{
  text-shadow: 0 0 1px white,0 0 2px #46d175,0 0 3px #3a8b83,0 0 4px white;
}
.light_baby_blue{
  text-shadow: 0 0 1px white,0 0 2px #145277,0 0 3px #3f6b84,0 0 4px white;
}
.light_baby_aqua{
  text-shadow: 0 0 1px white,0 0 2px #0c607a,0 0 3px #438c9f,0 0 4px white;
}
.border_orange{
  border-color: #695e37!important;
 }
.border_blue{
  border-color: #1d4f9a!important;
 }
.border_aqua{
  border-color: #258070!important;
 }
.mt_15{
  margin-top: 14px!important;
}
.mt_10{
  margin-top: 10px!important;
}
.hierarchy{
  width: 100%;
  background-image: url("./images/hierarchy_img.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  &_text{
    margin: 1px 0 0 7px;
    font-size: 12px;
    font-weight: normal;
    font-style: italic;
    color: #FFFFFF;
  }
}

</style>
